<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<script src="./js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="./js/common.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/formly.css" />
<script src="./js/formly.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#container").formly();
		var creator = getCookie("creator");
		if(creator!=null){
			$("#username").val(creator);
			$("#remb").removeAttr("checked");
			$("#submit").click();
		}
	});
	
	function checkForm() {
		
		if(isNodeValEmpty($("#username"))){
			$(".errorHint").css("display","inline");
			$(".errorHint").text("User name should not be empty!");
			return false;
		}
		else if(!checkIfNodeMatch($("#username"), /^\w{5,30}$/ )) {
			$(".errorHint").css("display","inline");
			$(".errorHint").text("User name format illegal!");
			return false;
		}
		
		$(".errorHint").css("display", "none");
		
		return true;
	}
</script>
<title>Login</title>
<style type="text/css">
.container {
	border: 1px solid #ccc;
	width: 550px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}

.header {
	margin-top : 20px;
	margin-left:20px;
}

.header label {
	font-weight : bold;
	font-size : 30px; 
}

.loginAs {
	margin-top : 30px;
	margin-left:20px;
}

.but {
	margin-bottom:30px;
}

.but input {
	width : 60px;
}
</style>
</head>

<body>
<div class="container" id="container">
	<form action="build.jsp" method="post" onsubmit="return checkForm();">
		<div class="header">
			<label>Login</label>
		</div>
		<div class="loginAs">
			<label>Login As</label>
			<input type="text" name="username" id="username" />
			<label class="errorHint"></label>
		</div>
		<div class="oneLine">
			<input type="checkbox" name="remb" id="remb" />
			<label>Remember Me</label>
		</div>
		<div class="but oneLine">
			<input type="submit"  value="OK" id="submit">
			<input type="reset"  value="Cancel">
		</div>
	</form>
</div>
</body>
</html>